<!DOCTYPE html>
<html lang="zh-CN">
{%  load staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="applicable-device" content="pc,mobile">
    <!-- Bootstrap core CSS -->
    <link href="https://img.jigao616.com/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://img.jigao616.com/css/style.css" rel="stylesheet">
     <link href="/static/css/common/common.css" rel="stylesheet">

    <script type="text/javascript" src="/static/script/map/jquery.min.js"></script>
    <script type="text/javascript" src="/static/script/map/echarts.min.js"></script>
    <script type="text/javascript" src="/static/script/map/china.js"></script>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="http://www.rpcomputationalbiology.cn/static/style.css">
    <link rel="stylesheet" href="http://www.rpcomputationalbiology.cn/static/css/button.css">



    <title>预测</title>
    <style>
#china-map {
  width: 1000px;
  height: 1000px;
  margin: auto;
}
#box{
	display:none;
	background-color: goldenrod;
	width: 180px;
	height: 30px;
}
#box-title{
	display:block;
}
</style>


    <!--JQUERY -->
    <!--模版的方式渲染本地的jquery。这里也可以去渲染服务 -->
    <script src="{% static 'lib/jquery-3.1.1.min.js' %}"></script>
    <script src="https://img.jigao616.com/js/html5shiv.min.js"></script>
    <script src="/static/script/common/common.js"></script>
    <script src="/static/script/index/index.js"></script>
</head>
<body>
<header class="header-area">
    <!-- Top Header Area -->
    <div class="top-header-area d-flex justify-content-between align-items-center">
    </div>
    <!-- Navbar Area -->
    <div id="sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 80px;">
        <div class="clever-main-menu" style="width: 100%; position: fixed; top: 0px; z-index: inherit;">
        <div class="classy-nav-container light left breakpoint-off">
            <!-- Menu -->
            <nav class="classy-navbar justify-content-between" id="cleverNav">

                <!-- Logo -->
                <a class="nav-brand" href="/index"><img src="{% static 'image/logo4.png' %}" alt="" style="width:550px;height:80px;margin-right:15px"></a>

                <!-- Navbar Toggler -->
                <div class="classy-navbar-toggler">
                    <span class="navbarToggler"><span></span><span></span><span></span></span>
                </div>

                <!-- Menu -->
                <div class="classy-menu">

                    <!-- Close Button -->
                    <div class="classycloseIcon">
                        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                    </div>

                    <!-- Nav Start -->
                    <div class="classynav">
                        <ul>
                            <li><a href="/index">主页</a></li>
                            <li ><a href="/visual">例子</a>
                            <li ><a href="/mysystem">预测</a>
                            <li><a href="/incidence">发病情况</a></li>
                            <li><a href="/inform/inform">研究现状</a></li>
                            <li><a href="/upfile">上传</a></li>
                        </ul>

<!--                        &lt;!&ndash; Search Button &ndash;&gt;-->
<!--                        <div class="register-login-area">-->
<!--                            <a href="/analysis" class="btn active">Run TPP</a>-->
<!--                        </div>-->

                        <!-- Register / Login -->
                        <div class="register-login-area">
                            <a href="/user/register" class="btn">注册</a>
                            <a href="/user/login" class="btn">登录</a>
                        </div>

                    </div>
                    <!-- Nav End -->
                </div>
            </nav>
        </div>
    </div></div>
</header>

        <div class="wrap">
            <div class="container">
                <div class="row">
<!--                    &lt;!&ndash;搜索榄 &ndash;&gt;-->
<!--                    <div class="col-search-list col-topbar">-->
<!--                        <div class="soinbox">-->
<!--                            <div class="so-in-search">-->
<!--                                <input type="text" value="" placeholder="疾病预警、二氧化碳" class="in-control" id="search_text" name="search_text" onkeydown="">-->
<!--        						<button class="btn-inbar" onclick=""></button>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->


                </div>

                <div class="map">

                    <button id="back">返回全国</button>
                    <div id="china-map"></div>
                    <script>
	                var myChart = echarts.init(document.getElementById('china-map'));
                    var oBack = document.getElementById("back");
                    var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
                    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
    var seriesData = [{
      name: '北京',
      value: 100
    }, {
      name: '天津',
      value: 0
    }, {
      name: '上海',
      value: 60
    }, {
      name: '重庆',
      value: 0
    }, {
      name: '河北',
      value: 60
    }, {
      name: '河南',
      value: 60
    }, {
      name: '云南',
      value: 0
    }, {
      name: '辽宁',
      value: 0
    }, {
      name: '黑龙江',
      value: 0
    }, {
      name: '湖南',
      value: 60
    }, {
      name: '安徽',
      value: 0
    }, {
      name: '山东',
      value: 60
    }, {
      name: '新疆',
      value: 0
    }, {
      name: '江苏',
      value: 0
    }, {
      name: '浙江',
      value: 0
    }, {
      name: '江西',
      value: 0
    }, {
      name: '湖北',
      value: 60
    }, {
      name: '广西',
      value: 60
    }, {
      name: '甘肃',
      value: 0
    }, {
      name: '山西',
      value: 60
    }, {
      name: '内蒙古',
      value: 0
    }, {
      name: '陕西',
      value: 0
    }, {
      name: '吉林',
      value: 0
    }, {
      name: '福建',
      value: 0
    }, {
      name: '贵州',
      value: 0
    }, {
      name: '广东',
      value: 597
    }, {
      name: '青海',
      value: 0
    }, {
      name: '西藏',
      value: 0
    }, {
      name: '四川',
      value: 60
    }, {
      name: '宁夏',
      value: 0
    }, {
      name: '海南',
      value: 60
    }, {
      name: '台湾',
      value: 0
    }, {
      name: '香港',
      value: 0
    }, {
      name: '澳门',
      value: 0
    }];

    oBack.onclick = function () {
      initEcharts("china", "中国");
    };

    initEcharts("china", "中国");

    // 初始化echarts
    function initEcharts(pName, Chinese_) {
      var tmpSeriesData = pName === "china" ? seriesData : [];

      var option = {
        title: {
          text: Chinese_ || pName,
          left: 'center'
        },
          tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c} (p / km2)'
          },
        series: [
          {
            name: Chinese_ || pName,
            type: 'map',
            mapType: pName,
            roam: false,//是否开启鼠标缩放和平移漫游
            data: tmpSeriesData,
            top: "3%",//组件距离容器的距离
              zoom:1.1,
              selectedMode : 'single',

              label: {
                  normal: {
                      show: true,//显示省份标签
                      textStyle:{color:"#fbfdfe"}//省份标签字体颜色
                  },
                  emphasis: {//对应的鼠标悬浮效果
                      show: true,
                      textStyle:{color:"#323232"}
                  }
              },
              itemStyle: {
                  normal: {
                      borderWidth: .5,//区域边框宽度
                      borderColor: '#0550c3',//区域边框颜色
                      areaColor:"#4ea397",//区域颜色

                  },

                  emphasis: {
                      borderWidth: .5,
                      borderColor: '#4b0082',
                      areaColor:"#ece39e",
                  }
              },
          }
        ]

           };

      myChart.setOption(option);

      myChart.off("click");

      if (pName === "china") { // 全国时，添加click 进入省级
        myChart.on('click', function (param) {
          console.log(param.name);
          // 遍历取到provincesText 中的下标  去拿到对应的省js
          for (var i = 0; i < provincesText.length; i++) {
            if (param.name === provincesText[i]) {
              //显示对应省份的方法
              showProvince(provinces[i], provincesText[i]);
              break;
            }
          }
            if (param.componentType === 'series') {
                var provinceName =param.name;
                $('#box').css('display','block');
                $("#box-title").html(provinceName);

            }
        });
      } else { // 省份，添加双击 回退到全国
        myChart.on("dblclick", function () {
          initEcharts("china", "中国");
        });
      }
    }

    // 展示对应的省
    function showProvince(pName, Chinese_) {
      //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
      loadBdScript('$' + pName + 'JS', '/static/script/map/province/' + pName + '.js', function () {
        initEcharts(Chinese_);
      });
    }

    // 加载对应的JS
    function loadBdScript(scriptId, url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      if (script.readyState) {  //IE
        script.onreadystatechange = function () {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // Others
        script.onload = function () {
          callback();
        };
      }
      script.src = url;
      script.id = scriptId;
      document.getElementsByTagName("head")[0].appendChild(script);
    };
</script>

                </div>
            </div>
        </div>


        <div class="footer">
            <p>
                <a href="javascript:void(0)">关于我们</a>
                <span class="line">|</span>
                <a href="javascript:void(0)">联系我们</a>
                <span class="line"></span>
            </p>
            <p>Copyright © 2018 All Rights Reserved. </p>
            <p> <a href="javascript:void(0)" target="_blank" rel="nofollow">XICP备xxxxx号-x</a>公网安备 xxxxxxxxxx号 归xxx所有</p>
         </div>
</body>
</html>